<template>
  <div class="common-layout" style="margin-left: 70px;margin-right: 70px">
    <el-container>
      <el-aside width="150px">
        <div style="background-color: white;width: 150px;height: 900px;margin-top: 20px;display: flex; flex-direction: column;">
          <router-link to="/personalCenter" class="router">个人中心</router-link>
          <router-link to="/cart" class="router">我的购物车</router-link>
          <router-link to="/myOrder" class="router">我的订单</router-link>
          <router-link to="/" class="router">评价管理</router-link>
          <router-link to="" class="router">我的发票</router-link>
          <router-link to="" class="router">我的优惠卷</router-link>
          <router-link to="" class="router">我的积分</router-link>
          <router-link to="" class="router">我的收藏</router-link>
          <router-link to="" class="router">我的足迹</router-link>
          <router-link to="/personalInfo" class="router">个人信息</router-link>
          <router-link to="" class="router">账号设置</router-link>
          <router-link to="" class="router">我的收货地址</router-link>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div style="background-color: white;height: 400px;width: auto;margin-top: 20px;overflow: hidden;position: relative">
            <h1 style="margin-top: 5px;margin-left: 30px">个人中心</h1>
            <hr style="background: lightgoldenrodyellow;">
            <div style="background-color: #42b983;width: 110px;height: 110px;margin-top: 50px;margin-left: 50px;border-radius: 50%;position: absolute">
                  <img :src="userinfo.imgUrl" align="center" style="width: 110px;height: 110px;border-radius: 50%"/>
            </div>
            <div class="d1" style="background-color: white;width: 200px;margin-top: 60px;margin-left: 200px;position: absolute">
              <svg t="1717030872106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3905" width="20" height="30"><path d="M956.48 972.8h-51.2c0-216.896-176.448-393.28-393.28-393.28S118.72 755.968 118.72 972.8h-51.2c0-200.192 132.992-369.856 315.264-425.344a277.12 277.12 0 0 1-147.712-244.864C235.072 149.888 359.296 25.6 512 25.6s276.928 124.224 276.928 276.928c0 106.112-59.904 198.4-147.712 244.864 182.336 55.488 315.264 225.216 315.264 425.344zM512 76.8c-124.48 0-225.728 101.248-225.728 225.728S387.52 528.256 512 528.256s225.728-101.248 225.728-225.728S636.48 76.8 512 76.8z" p-id="3906"></path></svg>
              <span>{{ userinfo.username }}</span><br>
              <svg t="1717030784046" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2828" width="32" height="30"><path d="M198.4 780.8 198.4 230.4l70.4 0 0 550.4L198.4 780.8z" p-id="2829"></path><path d="M403.2 780.8 403.2 230.4l192 0c44.8 0 76.8 0 96 6.4 32 6.4 57.6 19.2 83.2 38.4 32 25.6 51.2 57.6 64 96s19.2 83.2 19.2 128c0 44.8-6.4 76.8-12.8 108.8s-19.2 57.6-38.4 83.2-32 38.4-51.2 51.2-38.4 19.2-64 25.6-57.6 6.4-89.6 6.4L403.2 774.4zM473.6 716.8l115.2 0c38.4 0 64-6.4 83.2-12.8s38.4-19.2 51.2-25.6c19.2-19.2 32-38.4 38.4-70.4s12.8-64 12.8-108.8c0-57.6-6.4-102.4-25.6-134.4s-44.8-51.2-70.4-64c-19.2-6.4-51.2-12.8-96-12.8L473.6 288 473.6 716.8z" p-id="2830"></path></svg>
              <span>{{ userinfo.id }}</span><br>
              <svg t="1717031056848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7926" width="32" height="24"><path d="M256 85.333333h512c64.8 0 117.333333 52.533333 117.333333 117.333334v618.666666c0 64.8-52.533333 117.333333-117.333333 117.333334H256c-64.8 0-117.333333-52.533333-117.333333-117.333334V202.666667c0-64.8 52.533333-117.333333 117.333333-117.333334z m0 64a53.333333 53.333333 0 0 0-53.333333 53.333334v618.666666a53.333333 53.333333 0 0 0 53.333333 53.333334h512a53.333333 53.333333 0 0 0 53.333333-53.333334V202.666667a53.333333 53.333333 0 0 0-53.333333-53.333334H256z m170.666667 618.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z" fill="#000000" p-id="7927"></path></svg>
              <span>{{ userinfo.phone }}</span>
            </div>
            <div style="background-color: white;width: 250px;height: 150px;margin-top: 170px;margin-left: 200px;position: absolute">
              <p>登录设备/平台: {{userinfo.device}} </p>
              <p>参考登录地: {{userinfo.location}} </p>
              <p>登录时间: {{userinfo.createTime}}</p>
            </div>
            <div style="background-color: white;width: 250px;height: 150px;margin-top: 170px;margin-left: 600px;position: absolute">
              <p>上次登录设备/平台: {{userinfo.device}}</p>
              <p>上次参考登录地: {{userinfo.location}}</p>
              <p>上次登录时间: {{userinfo.updateTime}}</p>
            </div>
            <div style="position: absolute;margin-top: 30px;margin-left: 900px">
              <el-button type="primary"><router-link to="/personalInfo" style="text-decoration: none;color: white">个人信息</router-link></el-button>
            </div>
          </div>
          <div style="background-color: white;height: auto;width: auto;margin-top: 30px;overflow: hidden;">
            <h1 style="margin-top: 5px;margin-left: 30px">我的订单</h1>
            <hr style="background: lightgoldenrodyellow;">
            <div class="svg2" style="background-color: white;height: 200px;">
              <div class="d2" style="width: 100px;height: 100px">
                <svg t="1717069642284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12400" width="70" height="70"><path d="M840.3 195.4H724.6c-15.6-71.9-79.8-126-156.3-126h-344c-88.2 0-160 71.8-160 160v605.8c0 65.8 53.6 119.4 119.4 119.4h656.6c65.8 0 119.4-53.6 119.4-119.4V314.8c0-65.9-53.5-119.4-119.4-119.4z m-683.8-33.8c18.2-18.2 42.3-28.2 67.8-28.2h344c25.5 0 49.6 10 67.8 28.2 9.8 9.8 17.2 21.3 21.9 33.7H183.7c-19 0-37 4.5-52.9 12.4 4-17.2 12.8-33.1 25.7-46.1z m683.8 733.3H183.7c-32.9 0-59.7-26.8-59.7-59.7V314.8c0-32.9 26.8-59.7 59.7-59.7h656.6c32.9 0 59.7 26.8 59.7 59.7v97.5H560.6c-35.3 0-64 28.7-64 64v186c0 35.3 28.7 64 64 64H900v109c0 32.8-26.8 59.6-59.7 59.6zM900 476.2v186H592.6c-17.6 0-32-14.4-32-32v-122c0-17.6 14.4-32 32-32H900z" fill="" p-id="12401"></path><path d="M659 569.2m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="" p-id="12402"></path></svg>
                <el-button link type="primary"><router-link to="/myOrder" style="text-decoration: none;color:dodgerblue;">待付款</router-link></el-button>
              </div>
              <div class="d2" style="width: 100px;height: 100px">
                <svg t="1717069526896" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6352" width="70" height="70"><path d="M528 57.621333l369.493333 213.333334A32 32 0 0 1 913.493333 298.666667v426.666666a32 32 0 0 1-16 27.712l-369.493333 213.333334a32 32 0 0 1-32 0l-369.493333-213.333334A32 32 0 0 1 110.506667 725.333333V298.666667a32 32 0 0 1 16-27.712l144.768-83.626667 0.96-1.578667 0.874666 0.533334L496 57.621333a32 32 0 0 1 32 0z m-6.122667 838.357334h-19.797333l9.92 5.738666 9.877333-5.738666zM174.506667 350.592v356.266667l305.493333 176.362666 0.021333-352.917333-305.493333-179.712z m675.029333-0.021333l-70.869333 41.664L778.666667 490.666667a32 32 0 0 1-11.690667 24.746666l-2.56 1.877334-128 85.333333c-20.48 13.653333-47.658667 0.021333-49.642667-23.829333L586.666667 576v-70.826667l-42.666667 25.109334v352.938666l305.493333-176.362666V350.570667zM392.32 191.36l-55.808 32.234667 298.368 175.488a32 32 0 0 1 15.616 24.533333L650.666667 426.666667v89.536l64-42.666667v-92.586667L392.341333 191.36z m-119.509333 69.013333L209.493333 296.938667 512 474.858667l62.741333-36.906667-301.909333-177.578667zM512 122.282667l-55.957333 32.298666 300.202666 176.597334 58.24-34.261334L512 122.282667z" fill="#4E4E4E" p-id="6353"></path></svg>
                <el-button link type="primary"><router-link to="/myOrder" style="text-decoration: none;color:dodgerblue;">未发货</router-link></el-button>
              </div>
              <div class="d2" style="width: 100px;height: 100px">
                <svg t="1717067386283" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5479" width="80" height="80"><path d="M927.887085 627.985886c0-0.722653 0-0.722653 0 0L865.738885 361.326747c-16.62103-70.097389-72.988003-108.398024-117.069866-108.398024h-71.542696c-13.730416 0-25.292872 11.562456-25.292872 25.292872v267.381792c0 13.730416 11.562456 25.292872 25.292872 25.292873h100.448836c13.730416 0 25.292872-11.562456 25.292872-25.292873s-11.562456-25.292872-25.292872-25.292872H703.141849V303.514467h46.249824c15.898377 0 54.921665 17.343684 67.929428 69.374736l61.425547 265.936485c6.503881 33.964714 1.445307 53.476359-15.898377 59.98024-13.007763 4.335921-20.234298 18.788991-15.898377 31.796754 3.613267 10.839802 13.730416 17.343684 23.847565 17.343684 2.890614 0 5.781228-0.722653 7.949189-1.445307 20.956951-7.949188 66.484121-33.242061 49.140437-118.515173z" fill="" p-id="5480"></path><path d="M161.874382 244.256881h422.752294c13.730416 0 25.292872-11.562456 25.292872-25.292873s-11.562456-25.292872-25.292872-25.292872H161.874382c-45.52717 0-78.769231 29.628793-78.76923 71.542696V672.067749c0 27.460833 14.45307 52.753705 38.300635 67.206775 4.335921 2.16796 8.671842 3.613267 13.007763 3.613267 8.671842 0 16.62103-4.335921 21.679605-12.285109 7.226535-12.285109 3.613267-27.460833-8.671842-34.687368-8.671842-5.058574-13.730416-14.45307-13.730417-23.847565V264.491179c0-18.788991 21.679605-20.234298 28.183486-20.234298z" fill="" p-id="5481"></path><path d="M706.755116 609.919548c-54.921665 0-101.171489 39.023289-112.011291 91.776994h-187.889908c-10.839802-52.031052-57.089626-91.776994-112.011292-91.776994-62.870854 0-114.179252 51.308398-114.179252 114.179252S231.971771 838.278052 294.842625 838.278052c53.476359 0 98.280875-36.855328 110.565985-86.718419h190.780522c12.285109 49.863091 57.089626 86.718419 110.565984 86.718419 62.870854 0 114.179252-51.308398 114.179252-114.179252s-51.308398-114.179252-114.179252-114.179252z m-348.318983 121.405787c-3.613267 31.796754-30.351447 56.366972-63.593508 56.366973-35.410021 0-63.593507-28.90614-63.593507-63.593508s28.90614-63.593507 63.593507-63.593507c33.964714 0 62.1482 26.738179 63.593508 60.702893-0.722653 2.16796-0.722653 3.613267-0.722654 5.781228 0 1.445307 0 2.890614 0.722654 4.335921z m348.318983 56.366973c-35.410021 0-63.593507-28.90614-63.593507-63.593508s28.90614-63.593507 63.593507-63.593507 63.593507 28.90614 63.593508 63.593507-28.183486 63.593507-63.593508 63.593508z" fill="" p-id="5482"></path><path d="M578.845448 513.08398m-27.460833 0a27.460833 27.460833 0 1 0 54.921666 0 27.460833 27.460833 0 1 0-54.921666 0Z" fill="" p-id="5483"></path><path d="M578.845448 416.971066m-27.460833 0a27.460833 27.460833 0 1 0 54.921666 0 27.460833 27.460833 0 1 0-54.921666 0Z" fill="" p-id="5484"></path><path d="M578.845448 320.858151m-27.460833 0a27.460833 27.460833 0 1 0 54.921666 0 27.460833 27.460833 0 1 0-54.921666 0Z" fill="" p-id="5485"></path></svg>
                <el-button link type="primary"><router-link to="/myOrder" style="text-decoration: none;color:dodgerblue;">待收货</router-link></el-button>
              </div>
              <div class="d2" style="width: 100px;height: 100px">
                <svg t="1717069714387" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13439" width="70" height="70"><path d="M860.377432 133.214001 163.652244 133.214001c-41.643446 0-75.546603 33.903158-75.546603 75.546603l0 510.917342c0 41.643446 33.903158 75.546603 75.546603 75.546603l252.743328 0 95.618754 95.559403 95.589079-95.559403 252.774027 0c41.643446 0 75.516928-33.903158 75.516928-75.546603L935.89436 208.761628C935.89436 167.117159 902.020878 133.214001 860.377432 133.214001zM877.749078 231.983515l0 464.473567c0 22.381753-18.21178 40.593534-40.593534 40.593534L579.520813 737.050616l-67.506487 67.565838-67.536162-67.565838L186.874131 737.050616c-22.412452 0-40.624233-18.21178-40.624233-40.593534L146.249899 231.983515c0-22.412452 18.21178-40.624233 40.624233-40.624233l650.28039 0C859.537298 191.360306 877.749078 209.571063 877.749078 231.983515z" p-id="13440"></path><path d="M302.83519 403.749554 741.266637 403.749554c14.851243 0 26.972305-12.481266 26.972305-27.812439 0-15.361873-12.121062-27.872814-26.972305-27.872814L302.83519 348.0643c-14.851243 0-26.942629 12.510942-26.942629 27.872814C275.892561 391.268288 287.983947 403.749554 302.83519 403.749554z" p-id="13441"></path><path d="M741.266637 496.578776 302.83519 496.578776c-14.851243 0-26.942629 12.510942-26.942629 27.842115 0 15.331173 12.091386 27.842115 26.942629 27.842115L741.266637 552.263006c14.851243 0 26.972305-12.510942 26.972305-27.842115C768.238942 509.089717 756.11788 496.578776 741.266637 496.578776z" p-id="13442"></path></svg>
                <el-button link type="primary"><router-link to="/myOrder" style="text-decoration: none;color:dodgerblue;">待评价</router-link></el-button>
              </div>
              <div class="d2" style="width: 100px;height: 100px">
                <svg t="1717069798018" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14529" width="60" height="60"><path d="M934.399999 255.999999c-70.4-121.6-179.199999-204.799999-313.599999-236.799999-185.599999-51.2-383.999999 6.4-511.999999 153.6L19.200001 115.2l6.4 223.999999c0 19.2 25.6 32 38.4 19.2l191.999999-115.2L166.400001 198.399999c115.2-121.6 287.999999-166.4 447.999999-128 115.2 32 217.599999 108.8 275.199999 211.199999 64 108.8 76.8 230.399999 44.8 345.599999-32 115.2-108.8 217.599999-211.199999 275.199999-108.8 64-230.399999 76.8-345.599999 44.8-121.6-32-217.599999-108.8-281.599999-217.599999-6.4-12.8-25.6-19.2-38.4-12.8-12.8 6.4-19.2 25.6-12.8 38.4 70.4 121.6 179.199999 204.799999 313.599999 243.199999C403.2 1017.599997 448 1023.999997 492.8 1023.999997c89.6 0 179.199999-25.6 255.999999-70.4 121.6-70.4 204.799999-179.199999 236.799999-313.599999C1023.999999 511.999999 1004.799999 377.599999 934.399999 255.999999z" fill="#8C8C8C" p-id="14530"></path><path d="M665.6 716.799998 665.6 582.399998 339.2 582.399998l0 140.8 64 0L403.2 703.999998l204.799999 0 0 19.2L665.6 723.199998zM403.2 659.199998 403.2 627.199998l204.799999 0 0 32L403.2 659.199998z" fill="#8C8C8C" p-id="14531"></path><path d="M377.6 300.799999C352 345.599999 326.400001 383.999999 288.000001 415.999999c6.4 19.2 19.2 38.4 25.6 64C320.000001 473.599999 332.800001 460.799999 339.2 454.399999l0 115.2 57.6 0L396.8 563.199998l300.799999 0L697.599999 524.799999 550.4 524.799999 550.4 499.199999l121.6 0L672 460.799999 550.4 460.799999 550.4 441.599999l121.6 0L672 403.199999 550.4 403.199999 550.4 383.999999l140.8 0L691.199999 345.599999l-128 0C556.8 326.399999 544 313.599999 537.6 294.399999L480 307.199999C486.4 319.999999 492.8 332.799999 492.8 345.599999L416 345.599999c6.4-6.4 12.8-19.2 12.8-25.6L377.6 300.799999zM492.8 524.799999 396.8 524.799999 396.8 499.199999l102.4 0L499.2 524.799999zM492.8 460.799999 396.8 460.799999 396.8 441.599999l102.4 0L499.2 460.799999zM492.8 383.999999l0 25.6L396.8 409.599999 396.8 383.999999 492.8 383.999999z" fill="#8C8C8C" p-id="14532"></path></svg>
                <el-button link type="primary"><router-link to="/myOrder" style="text-decoration: none;color:dodgerblue;">退换/售后</router-link></el-button>
              </div>
              <div class="d2" style="width: 100px;height: 100px">
                <svg t="1717069968716" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19106" width="64" height="64"><path d="M603.320398 81.609108h-182.648957c-36.918406 0-66.064516-19.43074-66.064516-40.804554S383.753035 0 420.671441 0h182.648957c36.918406 0 66.064516 19.43074 66.064516 40.804554s-29.14611 40.804554-66.064516 40.804554zM774.31091 334.208729H251.624003a33.032258 33.032258 0 0 1 0-66.064516h522.686907a33.032258 33.032258 0 0 1 0 66.064516zM774.31091 512.971537H251.624003a33.032258 33.032258 0 0 1 0-66.064516h522.686907a33.032258 33.032258 0 0 1 0 66.064516zM774.31091 744.197343H251.624003a33.032258 33.032258 0 0 1 0-66.064516h522.686907a33.032258 33.032258 0 0 1 0 66.064516z" p-id="19107"></path><path d="M815.115464 1024H208.876375a155.44592 155.44592 0 0 1-155.44592-157.388994V163.218216a155.44592 155.44592 0 0 1 155.44592-155.44592h56.349146a34.003795 34.003795 0 0 1 33.032258 33.032258 34.003795 34.003795 0 0 1-33.032258 33.032258H208.876375a91.130171 91.130171 0 0 0-91.324478 91.324478v703.39279A91.130171 91.130171 0 0 0 208.876375 959.878558h606.239089a91.130171 91.130171 0 0 0 91.324478-91.324478V163.218216a91.130171 91.130171 0 0 0-91.324478-91.324478h-54.406072A34.003795 34.003795 0 0 1 727.677134 38.86148 34.003795 34.003795 0 0 1 760.709392 5.829222h54.406072a155.44592 155.44592 0 0 1 155.44592 155.44592v703.39279a156.806072 156.806072 0 0 1-155.44592 159.332068z" p-id="19108"></path></svg>
                <el-button link type="primary"><router-link to="/myOrder" style="text-decoration: none;color:dodgerblue;">全部订单</router-link></el-button>
              </div>
            </div>
            <hr>
            <div class="order-list">
              <div class="order-item" v-for="(order, index) in orders" :key="index">
                <div class="order-header">
                  <span class="order-id">订单编号: {{ order.orderNumber }}</span>
                  <span class="order-status">{{ order.status }}</span>
                  <a href="/orderDetails" style="color: #7F7F7F;text-decoration: none;align-items: center;font-size: 14px;">查看订单详情》</a>
                </div>
                <div class="order-details">
                  <p v-if="order.status === '花店已接单'">
                    <!-- 这里可以添加一些内容，如“花店已接单”的详细状态 -->
                  </p>
                  <p>目的地：{{ order.address }}</p>
                  <p class="order-time">时间: {{ order.orderTime }}</p>
                </div>
              </div>
            </div>
          </div>
        </el-header>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";


const userinfo = ref(
    {username:'',id:'',phone:'',
      imgUrl:'',device:'',
      location:'',createTime:'',
      updateTime:''});

const user = ref(getUser());

const selectPersonal = () => {
  userinfo.value.username = "彭于晏";
  // userinfo.value.username = user.value.name;
  let data = qs.stringify(userinfo.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/personal/select?' + data).then((response) => {
    if (response.data.code == 2000) {
      userinfo.value = response.data.data;
      console.log(response.data.data);
    } else {
      ElMessage(response.data.msg);
    }
  })
}

onMounted(()=>{
  selectPersonal();
  orderInfo();
})

const orderInfo = () => {
  userinfo.value.username = "林";
  //userinfo.value.username = user.value.name;
  let data = qs.stringify(userinfo.value);
  console.log(data);
  axios.get(BASE_URL+'/v1/personal/order?' + data).then((response) => {
    if (response.data.code == 2000) {
      orders.value = response.data.data;
      console.log(response.data.data);
    } else {
      ElMessage(response.data.msg);
    }
  })
}

  const orders = ref([
  {
    orders:'',
    orderNumber: '',
    status: '',
    orderTime: '',
    address:'',
  },
]);

</script>

<style scoped>

.router {
  margin-bottom: 10px;
  text-decoration: none;
  margin-left: 40px;
  margin-top: 10px;
}

.router:hover {
  /* 鼠标悬浮时的样式 */
  color: red; /* 例如，改变文字颜色为红色 */
}

.d1 svg {
  /* 根据需要设置SVG的宽度和高度，以确保它们与文本对齐 */
  width: 20px; /* 或者其他合适的值 */
  height: 30px; /* 或者其他合适的值，注意与文本行高匹配 */
  vertical-align: middle; /* 使SVG与文本垂直居中对齐 */
  margin-right: 30px;
  /* 其他样式... */
}

span {
  vertical-align: middle; /* 确保文本与SVG垂直居中对齐 */
  /* 其他样式... */
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 订单项之间的间距 */
}

.order-item {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.svg2 {
  display: flex;
  justify-content: center;
}

.d2 {
  margin-left: 80px;
  margin-top: 30px;
  display: flex;
  flex-direction: column; /* 垂直方向堆叠 */
  justify-content: space-between; /* 上下分布 */
  align-items: center; /* 如果需要子元素水平居中 */
  height:20px
}

.order-details p {
  margin: 0;
}

.order-time {
  color: #777;
  font-size: 0.8em;
}
</style>